<template>
    <div>
        <el-form
            class="form-container"
            :model="form"
            :rules="rules"
            ref="postForm"
            label-width="200px">
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="订单号：">
                        {{ orderDetail.orderNo }}
                    </el-form-item>
                    <el-form-item label="商品：">
                        {{ productInfo.title }}
                    </el-form-item>
                    <el-form-item label="规格：">
                        {{ productInfo.attribute }}
                    </el-form-item>
                    <el-form-item label="下单人：">
                        {{ orderDetail.addressName }}
                    </el-form-item>
                    <el-form-item label="联系电话：">
                        {{ orderDetail.addressMobile }}
                    </el-form-item>
                    <template v-if="productInfo.feedbackId>0">
                        <el-form-item label="处理方式：">
                            <span v-if="feedbackRow.type==1">退款, 但不退货</span>
                            <span v-else-if="feedbackRow.type==2">退款，并退货</span>
                        </el-form-item>
                        <el-form-item label="退款原因：">
                            {{ feedbackRow.reason }}
                        </el-form-item>
                        <el-form-item label="创建时间：">
                            {{ feedbackRow.createdAt }}
                        </el-form-item>
                        <el-form-item label="更新时间：">
                            {{ feedbackRow.updatedAt }}
                        </el-form-item>
                        <el-form-item label="退款状态：">
                            <span style="color:red;">{{ productInfo.feedbackText }}</span>
                        </el-form-item>
                        <el-form-item label="备注：" prop="remark">
                            <el-input size="mini" v-if="feedbackRow.status==2||feedbackRow.status==3" v-model="form.remark" type="textarea" />
                            <span v-else>{{ form.remark }}</span>
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="feedbackRow.status==2" :loading="saveLoding" type="primary" size="mini" @click="hasSend()">买家已发货</el-button>
                            <el-button v-if="feedbackRow.status==3" :loading="saveLoding" type="primary" size="mini" @click="confirmFeedback()">收到货，同意退款</el-button>
                            <el-button v-if="feedbackRow.status==2||feedbackRow.status==3" :loading="saveLoding" type="primary" size="mini" @click="cancelFeedback()">取消维权</el-button>
                            <el-button type="white" size="mini" @click="cancel()">取消</el-button>
                        </el-form-item>
                    </template>
                    <template v-else>
                        <el-form-item label="处理方式：" prop="type">
                            <el-radio-group v-model="form.type">
                                <el-radio :label="1">退款, 但不退货</el-radio>
                                <el-radio v-if="productInfo.shippingStatus==1" :label="2">退款，并退货</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="退款原因：" prop="reason">
                            <el-input size="mini" v-model="form.reason" placeholder="请输入退款原因" />
                        </el-form-item>
                        <el-form-item>
                            <el-button :loading="saveLoding" type="primary" size="mini" @click="next()">确定退款</el-button>
                            <el-button type="white" size="mini" @click="cancel()">取消</el-button>
                        </el-form-item>

                    </template>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import {
        order_detail,
        order_logistics,
        order_feedbackNew,
        order_feedbackHasSend,
        order_feedbackCancel,
        order_feedbackConfirm
    } from '../../api/order';

    export default {
        name: 'order-feedback',
        components: {
        },
        props: {
            formData: Object
        },
        computed: {
        },
        watch: {
            formData: {
                immediate: true,
                handler (val) {
                    // console.log(val)
                    this.currentId = val.order_id;
                    this.currentItemId = val.order_item_id;
                    this.$nextTick(() => {
                        this.$refs.postForm.resetFields();
                    });

                    if(this.currentId > 0) {
                        this.getDetail()
                    }
                }
            }
        },
        data() {
            return {
                feedbackRow: {},
                productInfo: {},
                saveLoding: false,
                activeName: "first",
                logisticsList: [],
                orderDetail: {},
                form: {
                    orderId: 0,
                    orderItemId: 0,
                    type: undefined,
                    reason: undefined,
                    remark: undefined,
                },
                currentId: 0,
                currentItemId: 0,
                formStatus: 'create',
                rules: {
                    type: [
                        {
                            required: true,
                            message: '请选择处理方式',
                            trigger: 'blur'
                        }
                    ],
                    reason: [
                        {
                            required: true,
                            message: '请填写退款原因',
                            trigger: 'blur'
                        }
                    ],
                    logisticsId: [
                        {
                            required: true,
                            message: '请选择物流公司',
                            trigger: 'blur'
                        }
                    ],
                    logisticsKdh: [
                        {
                            required: true,
                            message: '请输入快递单号',
                            trigger: 'blur'
                        }
                    ],
                },
                fetchSuccess: true,
                saveLoading: false,
            }
        },
        created() {
            this.getLogistics();
        },
        methods: {
            getLogistics() {
                order_logistics().then((res)=>{
                    this.logisticsList = res.data;
                }).catch((err)=>{
                    this.logisticsList = []
                });
            },
            resetTemp() {
                this.form = {
                    orderId: 0,
                    orderItemId: 0,
                    type: undefined,
                    reason: undefined,
                    remark: undefined,
                };
            },
            getDetail() {
                this.resetTemp();

                order_detail(this.currentId).then(response => {
                    this.orderDetail = response.data;

                    if(this.orderDetail) {
                        this.form.orderId = this.currentId;
                    } else {
                        this.form.orderId = undefined;
                    }

                    this.orderDetail.products.forEach((item)=>{
                        if(item.id === this.currentItemId) {
                            this.productInfo = item;
                            if(this.productInfo.shippingStatus==1) {
                                this.form.type = 2;
                            } else {
                                this.form.type = 1;
                            }

                            if(this.productInfo.feedbackId > 0) {
                                this.orderDetail.feedbackList.forEach((item2)=>{
                                    if(item2.id == this.productInfo.feedbackId) {
                                        this.feedbackRow = item2;
                                        this.form.remark = this.feedbackRow.remark;
                                        // console.log(this.feedbackRow)
                                        return false;
                                    }
                                })
                            } else {
                                this.feedbackRow = {};
                            }
                            return false;
                        }
                    })
                }).catch(()=>{
                    this.form.orderId = undefined;
                });
            },
            cancel() {
                this.$emit('cancelCreate');
            },
            hasSend() {
                this.$confirm('确定买家已发货？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        order_feedbackHasSend({
                            orderId: this.currentId,
                            orderItemId: this.currentItemId,
                            remark: this.form.remark
                        }).then((res)=>{
                            this.resetTemp();
                            this.saveLoding = false;
                            this.$emit('okCreate');

                        }).catch((err)=>{
                            this.saveLoding = false;
                        })
                    }).catch(()=>{});

            },
            cancelFeedback() {
                this.$confirm('确定取消维权申请？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        order_feedbackCancel({
                            orderId: this.currentId,
                            orderItemId: this.currentItemId,
                            remark: this.form.remark
                        }).then((res)=>{
                            this.resetTemp();
                            this.saveLoding = false;
                            this.$emit('okCreate');

                        }).catch((err)=>{
                            this.saveLoding = false;
                        })
                    }).catch(()=>{});

            },
            confirmFeedback() {
                this.$confirm('确定同意退款？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        order_feedbackConfirm({
                            orderId: this.currentId,
                            orderItemId: this.currentItemId,
                            remark: this.form.remark
                        }).then((res)=>{
                            this.resetTemp();
                            this.saveLoding = false;
                            this.$emit('okCreate');

                        }).catch((err)=>{
                            this.saveLoding = false;
                        })
                    }).catch(()=>{});

            },
            next() {
                let form = "postForm";

                if(form) {
                    this.$refs[form].validate(valid => {
                        if(valid) {
                            this.saveLoding = true;
                            this.form.orderId = this.currentId;
                            this.form.orderItemId = this.currentItemId;
                            order_feedbackNew(this.form).then((res)=>{
                                this.resetTemp();
                                this.saveLoding = false;
                                this.$emit('okCreate');

                            }).catch((err)=>{
                                this.saveLoding = false;
                            })
                        }
                    });
                }
            },
        }
    }
</script>